<!-- 属性使用示例: filter 排除元素 -->
<template>
  <div>
    <p>{{ dragText }}</p>
    <p>包含forbid样式的元素将无法拖动,第一行无法拖动,也无法拖动到第一行</p>
    <div>
      <!--
        filter: 定义哪些列表元素不能进行拖放
        onMove: 里的逻辑保证了其他元素也无法移动到id为1的元素之上
      -->
      <draggable :list="arr" filter=".forbid" class="dragContainer" animation="500" @start="onStart" @end="onEnd"
                 chosenClass="choose" :move="onMove">
        <transition-group>
          <div :class="item.id===1?'item forbid':'item'" v-for="item in arr" :key="item.id">{{
              item.name
            }}{{ item.id === 1 ? '(forbid)' : '' }}
          </div>
        </transition-group>
      </draggable>
    </div>
  </div>
</template>

<script>
import {defineComponent, reactive, ref} from "vue";
import {VueDraggableNext as draggable} from 'vue-draggable-next'

export default defineComponent({
  setup() {
    const dragText = ref('停止拖动')
    const arr = reactive([
      {id: 1, name: '张三'},
      {id: 2, name: '李四'},
      {id: 3, name: '王五'},
      {id: 4, name: '赵六'},
      {id: 5, name: '孙七'}
    ])
    const onStart = () => {
      dragText.value = '拖动中...'
    }
    const onEnd = () => {
      dragText.value = '停止拖动'
    }
    const onMove = (e) => {
      if (e.relatedContext.element.id == 1) return false;
      return true;
    }
    return {arr, dragText, onStart, onEnd, onMove}
  },
  components: {draggable}
})
</script>

<style scoped>
.dragContainer div {
  height: 30px;
  line-height: 30px;
  text-align: center;
  background-color: #eee;
  margin-bottom: 5px;
  cursor: move;
}

.dragContainer div:hover {
  background-color: #f3f3f3;
}

/* 选中元素样式，注意加 !important */
.choose {
  background-color: lightcoral !important;
}
</style>